<template>
	<view>
		<view class="lb-main-32">
			<view class="lb-item">
				<view class="item-left">
					选择商品
				</view>
				<view class="item-right" @click="showGoods = true">
					<input type="text" style="pointer-events: none;" v-model="gooosName" placeholder="请选择"
						placeholder-style="font-size: 28rpx; color: #999999;" disabled="">
					<view class="right-icon">
						<u-icon name="arrow-down" color="#999999"></u-icon>
					</view>
				</view>
			</view>
			<view class="lb-item">
				<view class="item-left">
					类型
				</view>
				<view class="item-right" @click="showType = true">
					<input type="text" style="pointer-events: none;" v-model="typeName" placeholder="请选择"
						placeholder-style="font-size: 28rpx; color: #999999;" disabled>
					<view class="right-icon">
						<u-icon name="arrow-down" color="#999999"></u-icon>
					</view>
				</view>
			</view>
			<view class="lb-item">
				<view class="item-left">
					数量
				</view>
				<view class="item-right">
					<input type="number" v-model="FormData.num" placeholder="请输入"
						placeholder-style="font-size: 28rpx; color: #999999;">
				</view>
			</view>
			<view class="lb-item" v-if="FormData.type==2">
				<view class="item-left">
					定价
				</view>
				<view class="item-right">
					<input type="digit" v-model="FormData.price" placeholder="请输入"
						placeholder-style="font-size: 28rpx; color: #999999;">
				</view>
			</view>
			<view class="lb-item" v-if="FormData.type==3||FormData.type==2">
				<view class="item-left">
					运费设置
				</view>
				<view class="item-right" @click="showYf = true">
					<input type="text" style="pointer-events: none;" v-model="yfName" placeholder="请选择"
						placeholder-style="font-size: 28rpx; color: #999999;" disabled>
					<view class="right-icon">
						<u-icon name="arrow-down" color="#999999"></u-icon>
					</view>
				</view>
			</view>
			<view class="lb-btn" @click="formSubmit">
				保存
			</view>
		</view>

		<u-picker :show="showGoods" :columns="columns1" keyName="name" @cancel="showGoods=false"
			@confirm="confirmGoods"></u-picker>
		<u-picker :show="showType" :columns="columns2" keyName="name" @cancel="showType=false"
			@confirm="confirmType"></u-picker>
		<u-picker :show="showYf" :columns="columns3" keyName="name" @cancel="showYf=false"
			@confirm="confirmYf"></u-picker>
	</view>
</template>

<script>
	import {
		getSignList,
		signSave
	} from "@/api/apis/comm.js"
	import {
		mobile,
		account
	} from "@/utils/comm.js"
	export default {
		data() {
			return {
				columns1: [],
				showGoods: false,
				gooosName: "",
				columns2: [
					[{
						name: '自用',
						value: 1
					}, {
						name: '销售',
						value: 2
					}, {
						name: '赠送',
						value: 3
					}]
				],
				showType: false,
				typeName: '',
				columns3: [
					[{
						name: '渠道专员支付',
						value: 1
					}, {
						name: '客户支付',
						value: 2
					}]
				],
				showYf: false,
				yfName: '',
				showArea: false,
				FormData: {}
			}
		},
		onLoad() {
			this.getGoods()
		},
		onShow() {},
		methods: {
			getGoods() {
				getSignList().then(res => {
					let arr = res.data.map(item => {
						return {
							name: item.goods.name + '（待设计库存:'+item.s_num+'）',
							id: item.id
						}
					})
					this.columns1 = [arr]
					console.log(this.columns1)
				})
			},
			confirmGoods(e) {
				this.gooosName = e.value[0].name
				this.FormData.goods_id = e.value[0].id
				this.showGoods = false;
			},
			confirmType(e) {
				this.typeName = e.value[0].name
				this.FormData.type = e.value[0].value
				this.showType = false;
			},
			confirmYf(e) {
				this.yfName = e.value[0].name
				this.FormData.freight_type = e.value[0].value
				this.showYf = false;
			},
			//提交
			formSubmit() {
				if (!this.FormData.goods_id)
					return this.$u.toast('请选择商品');
				if (!this.FormData.type)
					return this.$u.toast('请选择类型');
				if (!this.FormData.num)
					return this.$u.toast('请输入数量');
				if (this.FormData.type == 2 && !this.FormData.price)
					return this.$u.toast('请输入定价');
				if ((this.FormData.type == 2 || this.FormData.type == 3) && !this.FormData.freight_type)
					return this.$u.toast('请选择运费');
				uni.showLoading({
					title: "提交中",
					mask: true
				});
				signSave(this.FormData).then(res => {
					uni.hideLoading();
					this.$u.toast('保存成功!');
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1500)
				})

			}
		},

	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.lb-tip {
		font-size: $main-font-20;
		color: #F65D40;
		padding: 12rpx 0;
	}

	.lb-item {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 42rpx 0 24rpx 0;
		border-top: 2rpx solid #F5F5F5;

		&:nth-of-type(1) {
			border: none;
			padding-top: 10rpx;
		}

		.item-left {

			width: 200rpx;
			font-size: $main-font-28;
			color: $main-font-color;
			white-space: nowrap;

			&::before {
				content: '* ';
				color: #F65D40;
			}
		}

		.item-right {
			width: calc(100% - 150rpx);

			display: flex;
			flex-direction: row;
			justify-content: flex-end;

			input {
				width: 100%;
				text-align: right;
				font-size: $main-font-28;
				color: $main-font-color;
			}

			.right-icon {
				display: flex;
				flex-direction: row;
				padding: 12rpx;
			}


		}

	}


	.lb-btn {
		width: 600rpx;
		height: 88rpx;
		background: linear-gradient(135deg, #F7583F 0%, #F28F4C 100%);
		border-radius: 44rpx;
		line-height: 86rpx;
		text-align: center;
		font-size: $main-font-28;
		color: $main-font-color-white;
		margin: 140rpx auto 0;
	}
</style>